<template>
  <div>
    <div class="flex-col page">
      <div class="justify-center group">
        <span>CURRICULUM DETAIL</span>
      </div>
      <div class="flex-col group_1">
        <div class="flex-col items-end image-wrapper"></div>
        <div
          class="justify-between"
          v-for="(item, index) in datalist"
          :key="index"
          :class="item.bolen ? 'section_2' : 'section_1'"
        >
          <div class="flex-row">
            <img :src="item.icon" class="image_2" />
            <span class="text_3 text_2">{{ item.title }}</span>
          </div>
          <span class="text_1 text_4">{{ item.detail }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "curriculumDetail",
  data() {
    return {
      datalist: [
        {
          bolen: true,
          icon: require("../assets/img/bofang.png"),
          title: "播放",
          detail: "播放教学视频",
        },
        {
          bolen: false,
          icon: require("../assets/img/jiaoxue.png"),
          title: "学习",
          detail: "播放自己与视频",
        },
        {
          bolen: false,
          icon: require("../assets/img/shoucang.png"),
          title: "收藏",
          detail: "收藏教学视频",
        },
      ],
    };
  },
  mounted() {
    document.addEventListener("keydown", this.showPopup);
    this.$store.commit('com','curriculum_detail')
  },
  destroyed() {
    document.removeEventListener("keydown", this.showPopup);
  },
  methods: {
    showPopup(e) {
      var key = window.event ? e.keyCode : e.which;
      if (this.show == true) {
        switch (key) {
        }
      } else {
        switch (key) {
          case 9:
            this.show = true;
            break;
          case 13:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                this.$router.push({
                  name: "curriculum_detail",
                });
              }
            }
            break;
          case 37:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i != 0) {
                  this.datalist[i].bolen = false;
                  this.datalist[i - 1].bolen = true;
                  if (i == 1) {
                    location.hash = "#top";
                  } else {
                    var str = "#" + (i - 1);
                    location.hash = str;
                  }
                } else {
                  alert("已经是第一个");
                }
                break;
              }
            }
            break;
          case 38:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i != 0) {
                  this.datalist[i].bolen = false;
                  this.datalist[i - 1].bolen = true;
                  if (i == 1) {
                    location.hash = "#top";
                  } else {
                    var str = "#" + (i - 1);
                    location.hash = str;
                  }
                } else {
                  alert("已经是第一个");
                }
                break;
              }
            }
            break;
          case 39:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i != this.datalist.length - 1) {
                  this.datalist[i].bolen = false;
                  this.datalist[i + 1].bolen = true;
                  var str = "#" + (i + 1);
                  location.hash = str;
                } else {
                  alert("已经是最后一个");
                }
                break;
              }
            }
            break;
          case 40:
            for (let i = 0; i < this.datalist.length; i++) {
              if (this.datalist[i].bolen == true) {
                if (i != this.datalist.length - 1) {
                  this.datalist[i].bolen = false;
                  this.datalist[i + 1].bolen = true;
                  var str = "#" + (i + 1);
                  location.hash = str;
                } else {
                  alert("已经是最后一个");
                }
                break;
              }
            }
            break;
        }
      }
    },
  },
};
</script>

<style scoped>
.text_1 {
  opacity: 0.4;
}
.page {
  padding-top: 2.09rem;
  background-color: rgb(255, 255, 255);
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474161876372248401.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
}
.group {
  padding: 0.22rem 1.31rem 0.28rem;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.5rem;
  letter-spacing: 0.26rem;
  white-space: nowrap;
  position: relative;
}
.group_1 {
  margin-top: 3.19rem;
  padding: 0 2.03rem;
}
.text-wrapper {
  margin-top: 3.56rem;
  padding: 1.66rem 0;
  color: rgb(0, 0, 0);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 0.44rem;
  white-space: nowrap;
  background-image: linear-gradient(
    100deg,
    rgb(222, 255, 201) 0%,
    rgb(163, 248, 255) 100%
  );
}
.image {
  position: absolute;
  left: 1.31rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.66rem;
  height: 1rem;
}
.image-wrapper {
  margin: 0 1.09rem;
  padding: 1.16rem 0 12.13rem;
  background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/622f14ff5a7e3f031097a4ba/622f1ab14fa9330011966385/16474161876557335142.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_1 {
  margin: 0 1.09rem;
  padding: 1.56rem 1.06rem 1.59rem 1.59rem;
  color: rgb(0, 0, 0);
  font-size: 0.75rem;
  line-height: 0.66rem;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
}
.section_2 {
  padding: 2rem 1.5rem 1.94rem;
  color: rgb(0, 0, 0);
  font-size: 0.75rem;
  line-height: 0.53rem;
  white-space: nowrap;
  box-shadow: 0px -0.63rem 1.56rem rgba(0, 0, 0, 0.1),
    0px 1.56rem 1.56rem rgba(0, 0, 0, 0.1);
  background-color: rgb(255, 255, 255);
  position: relative;
}
.section_3 {
  margin: 0 1.09rem;
  padding: 1.59rem 1.56rem;
  color: rgb(0, 0, 0);
  font-size: 0.75rem;
  line-height: 0.53rem;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
}
.image_1 {
  margin-right: 1.16rem;
  width: 1.19rem;
  height: 1.09rem;
}
.text_3 {
  margin: 0.31rem 0 0.28rem;
}
.group_4 {
  align-self: center;
}
.text_8 {
  align-self: center;
}
.image_2 {
  width: 0.91rem;
  height: 1.22rem;
}
.text_2 {
  margin: 0.31rem 0 0.28rem 1.31rem;
}
.image_3 {
  width: 1.19rem;
  height: 1.06rem;
}
.text_4 {
  margin-left: 1.13rem;
  align-self: center;
}
.text_6 {
  margin-left: 1.16rem;
}
.image_4 {
  width: 0.94rem;
  height: 1.19rem;
}
.text_7 {
  margin-left: 1.31rem;
  align-self: center;
}
</style>
